import React, { useEffect, useState, FC } from 'react'
import OrderCard from '@/comopnents/OrderCard'
import { useLocation, useNavigate } from 'react-router-dom'
import { Form, Input, TextArea, Picker, Button, Toast } from 'antd-mobile'
import styles from './index.module.less'
import { Uploader } from '@nutui/nutui-react';
import { getBackAdressList, orderApply } from '../../../../utils/my/order'
import Navbar from '@/comopnents/Navbar'
export default function OrderBack() {
    const navigate = useNavigate()
    //表单回显
    const [form] = Form.useForm()
    const search = useLocation().search
    console.log(useLocation());
    //获取数量
    let productQuantity = useLocation().state
    //获取orderId
    let orderId = search.substring(4, search.indexOf('&'))
    //获取skuId
    let skuId = search.split('&skuid=')[1]
    // console.log(skuId)
    //图片文件列表
    const [fileList, setFileList] = useState([]) as any
    //弹出层显示
    const [visible, setVisible] = useState(false)
    //地址列表
    const [backAdress, setBackAddress] = useState([])
    //地址选中项
    const [value, setValue] = useState(['请选择退货地址']) as any
    //获取地址列表
    const getBackAdressData = async () => {
        let res: resType = await getBackAdressList()
        console.log(res);
        if (res.code === 20000) {
            let dataList = [{}] as any
            res.data.items.map((item: any, index: number) => {
                const newObj = {} as any
                newObj['label'] = item.addressName
                newObj['value'] = item.addressName
                newObj['key'] = item.id
                dataList[index] = newObj
            })
            // console.log(dataList);
            setBackAddress(dataList)
        }
    }


    //提交退货订单
    const onFinish = async (values: any) => {
        // console.log(values);
        // console.log(value.join(''));
        let kunn: any = backAdress.filter((item: any) => (item.value === value.join('')))[0]
        //    console.log(kunn.key);
        const orderInfo = {
            companyAddressId: kunn.key,
            count: productQuantity,
            description: values.description,
            orderId: orderId,
            orderItemId: skuId,
            proofPics: fileList.join(','),
            reason: values.reason
        }
        console.log(orderInfo);
        let res: resType = await orderApply(orderInfo)
        console.log(res);
        if (res.code === 20000) {
            Toast.show({
                icon: 'success',
                content: '退货成功'
            })
               navigate('/my/order?type=2')   
        }else{
            Toast.show({
                icon: 'fail',
                content: '订单状态异常,无法退单'
            })
        }
    }
    useEffect(() => {
        getBackAdressData()
    }, [])
    //点击展示地址选择框
    const selAdress = () => {
        console.log('oko');
        setVisible(true)
    }
    //图片上传成功后的数据
    const success = (responseText: any) => {
        if (responseText) {
            let aa = JSON.parse(responseText.responseText)
            console.log(aa.data.fileUrl);
               fileList.push(aa.data.fileUrl)
              setFileList(fileList) 
            console.log(fileList.join(','));
        }

    }
    return (
        <div>
            <Navbar title='乐居'></Navbar>
            <OrderCard orderId={orderId} skuId={skuId}></OrderCard>
            <div className={styles.content}>
                <Form layout='horizontal' mode='card' form={form} onFinish={onFinish}>
                    <Form.Item label='请选择退单数量:'>
                        <span className={styles.orderNum}>{productQuantity} </span>
                    </Form.Item>
                    <Form.Item label='请输入退货原因:' name='reason'>
                        <Input placeholder='请输入退货原因' />
                    </Form.Item>
                    <Form.Item label='请选择退货地址:' required={true}>
                        <Input value={value} onClick={selAdress} />
                    </Form.Item>
                    <Form.Item label='请输入问题描述:' style={{ height: '140px' }} name='description'>
                        <TextArea placeholder='请输入问题描述' style={{ '--font-size': "12px" }} />
                    </Form.Item>
                    <Form.Item label='温馨提醒:' className={styles.uploadImg}>
                        <span>上传图片总大小不能超过3m,单个文件大小不超过1m，图片总数量不超过三张</span>
                        <Uploader
                            url="http://leju.bufan.cloud/lejuClient/orderReturn/uploadImg"
                            onSuccess={success}
                            maximum="3"
                            multiple
                        />
                    </Form.Item>
                    <Form.Item style={{ backgroundColor: '#f1eee9' }}>
                        <Button block type="submit" style={{ backgroundColor: "#354e44", color: '#fff' }} size='large' shape='rounded' >
                            提交
                        </Button>
                    </Form.Item>
                </Form>
            </div>
            {backAdress &&
                <Picker
                    columns={[backAdress]}
                    visible={visible}
                    onClose={() => {
                        setVisible(false)
                    }}
                    onConfirm={v => {
                        setValue(v)
                    }}
                />

            }

        </div>
    )
}
